<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线考试平台</title>
    <link rel="shortcut icon" href="../images/exam.png" type="image/x-icon">
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">

</head>

<body class="index">
<div class="container">
    <div class="logo">
        <a href="#">在线考试平台</a>
    </div>
    <ul class="layui-nav left" lay-filter="user_head">
        <li class="layui-nav-item"><a href="/exam_system/online_exam">在线考试</a></li>
        <li class="layui-nav-item"><a href="/exam_system/online_test">在线测试</a></li>
        <li class="layui-nav-item"><a href="/exam_system/score">我的成绩</a></li>
        <li class="layui-nav-item"><a href="/exam_system/error_question">我的错题</a></li>
        <li class="layui-nav-item"><a href="/exam_system/resources_library">资源库</a></li>
    </ul>
    <ul class="layui-nav right" lay-filter="header-user" id="user-state">

    </ul>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <form class="layui-form layui-form-pane" action="" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">科目</label>
                <div class="layui-input-inline">
                    <select lay-filter="test" name="s_id" class="subject">
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md10 layui-col-md-offset1">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="online_test">
                        <ul class="layui-tab-title">
                            <li class="layui-this" value="0">单选题</li>
                            <li value="1">判断题</li>
                            <li value="2">简答题</li>
                        </ul>
                        <span style="float: right;padding-left: 30px"><a class="layui-btn layui-btn-normal layui-btn-sm" onclick="change_question()">换一换</a></span>
                        <span style="float: right;padding-left: 30px"><a class="layui-btn layui-btn-normal layui-btn-sm" onclick="browse_res()">查看结果</a></span>
                        <div class="layui-tab-content">
                            <div class="layui-row layui-col-space15" style="background: #f7f8fc" id="question_list">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript"  src="../lib/layui/layui.js"></script>
<script type="text/javascript" src="../js/xadmin.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    var index=0
    layui.use(['element', "form", 'jquery', 'layer', 'util'], function () {
        const form = layui.form;
        const $ = layui.jquery;
        const layer = layui.layer;
        const element = layui.element;
        var util = layui.util;
        header(element)
        get_cq_test();
        get_all_subject();

        form.on('select(test)', function (data) {
            get_cq_test();
        });

        element.on('tab(online_test)', function (data) {
            var type = $(this).attr('value')
            if (type === '0') {
                index=0
                get_cq_test()
            } else if (type === '1') {
                index=1
                get_jq_test()
            }else if (type === '2') {
                index=2
                get_saq_test()
            }
        });
        util.fixbar({
            top: true
            , css: {right: 15, bottom: 35}
            , bgcolor: '#2a96ff !important;display:block;'
            , showHeight: 100
            , click: function (type) {
                if (type === 'top') {
                    $('.layui-body').animate({//主要代码
                        scrollTop: 0
                    }, 200);
                }
            }
        });
    });

    function get_all_subject() {
        layui.use(['element', "form", 'jquery', 'layer'], function () {
            const form = layui.form;
            $.ajax({
                url: 'get_all_subject',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                success: function (data) {
                    if (data.code === 200) {
                        var text = ""
                        for (let i = 0; i < data.result.length; i++) {
                            text += "<option value=\"" + data.result[i].s_id + "\">" + data.result[i].s_name + "</option>"
                        }
                        $(".subject").html(text);
                        form.render();
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
        })
    }

    function header(element) {
        var user_json = JSON.parse(sessionStorage.getItem("userJson"));
        var text = ""
        if (user_json === null) {
            location.href = '/exam_system';
        } else {
            text += "<li class=\"layui-nav-item\">" +
                "                    <a href=\"javascript:;\">" + user_json.u_name + "</a>" +
                "                    <dl class=\"layui-nav-child\">" +
                "                        <dd><a onclick='modify_psw()'>修改密码</a></dd>" +
                "                        <dd><a onclick='user_quit()'>退出</a></dd>" +
                "                    </dl>" +
                "                </li>"
            $("#user-state").html(text)
        }
        element.render('header-user')
    }

    function user_quit() {
        sessionStorage.clear("userJson");
        location.href = '/exam_system';
    }

    function modify_psw() {
        layui.use(['element', "form", 'jquery', 'layer'], function () {
            const form = layui.form;
            const $ = layui.jquery;
            const layer = layui.layer;
            const element = layui.element;
            var text = "<form class=\"layui-form layui-form-pane\" action=\"\">" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">旧密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"text\" name=\"o_psw\" id='o_psw' autocomplete=\"off\" placeholder=\"请输入旧密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">新密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"password\" name=\"n_psw\" id='n_psw' autocomplete=\"off\" placeholder=\"请输入新密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">确认新密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"password\" name=\"re_psw\" id='re_psw' autocomplete=\"off\" placeholder=\"请输入确认密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "</form>"
            var index = layer.open({
                type: 1,
                title: "修改密码",
                closeBtn: 1,
                shadeClose: true,
                btn: '确定',
                yes: function (index, layero) {
                    var o_psw = $("#o_psw").val();
                    var n_psw = $("#n_psw").val();
                    var re_psw = $("#re_psw").val();
                    var user_json = JSON.parse(sessionStorage.getItem("userJson"));
                    var u_psw=user_json.u_psw;
                    var u_id=user_json.u_id;
                    if (u_psw!==o_psw){
                        layer.msg("旧密码错误 请重新输入", {icon: 5, time: 1000});
                        return false;
                    }
                    if (n_psw !== re_psw) {
                        layer.msg("两次密码不一致", {icon: 5, time: 1000});
                        return false;
                    }
                    $.ajax({
                        url: 'update_user_psw_by_u_id',
                        dataType: "json",//数据格式
                        type: "post",//请求方式
                        cache: false,
                        data: {
                            u_id: u_id,
                            u_psw: n_psw,
                        },
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg(data.message, {icon: 6}, function () {
                                    sessionStorage.clear("userJson");
                                    location.href = '/exam_system/';
                                });
                            } else {
                                layer.msg(data.message, {icon: 5, time: 1000});
                            }
                        },
                        error: function (e) {
                            alert("出现错误！！");
                        }
                    });
                },
                area: ['500px', '400px'],
                content: text
            });
        });
    }

    function get_cq_test(){
        layui.use(['element', "form", 'jquery', 'layer', 'util'], function () {
            const form = layui.form;
            const $ = layui.jquery;
            const layer = layui.layer;
            const data = form.val("example");
            const s_id = Number(data.s_id);
            $.ajax({
                url: 'get_cq_test_by_s_id',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data:{
                    s_id:s_id
                },
                success: function (data) {
                    if (data.code === 200) {
                        var text = ""
                        for (let i = 0; i < data.result.length; i++) {
                            text += "<div class=\"layui-col-sm12\" style=\"background: #f7f8fc\">" +
                                "                            <div class=\"layui-card\">" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>" +
                                "                                    <xmp>" + (i + 1) + "." + data.result[i].c_describe + "</xmp>" +
                                "                                </div>" +
                                "                                <form class=\"layui-form\" action=\"\">" +
                                "                                    <div class=\"layui-form-item\">" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"A\" title=\"<xmp>A:" + data.result[i].c_a + "</xmp>\">" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"B\" title=\"<xmp>B:" + data.result[i].c_b + "</xmp>\" >" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"C\" title=\"<xmp>C:" + data.result[i].c_c + "</xmp>\" >" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"D\" title=\"<xmp>D:" + data.result[i].c_d + "</xmp>\">" +
                                "                                    </div>" +
                                "                                    </div>" +
                                "                                </form>" +
                                "                               <div class='answer' hidden>" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>正确答案:" +
                                "                                    "+data.result[i].c_answer+"" +
                                "                                </div>" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>答案解析:" +
                                "                                    "+data.result[i].c_analysis+"" +
                                "                                </div>" +
                                "                               </div>" +
                                "                            </div>" +
                                "                        </div>";
                        }
                        $("#question_list").html(text);
                        form.render();
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
        })
    }
    function get_jq_test(){
        layui.use(['element', "form", 'jquery', 'layer', 'util'], function () {
            const form = layui.form;
            const $ = layui.jquery;
            const layer = layui.layer;
            const data = form.val("example");
            const s_id = Number(data.s_id);
            $.ajax({
                url: 'get_jq_test_by_s_id',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data:{
                    s_id:s_id
                },
                success: function (data) {
                    if (data.code === 200) {
                        var text = ""
                        for (let i = 0; i < data.result.length; i++) {
                            text += "<div class=\"layui-col-sm12\" style=\"background: #f7f8fc\">" +
                                "                            <div class=\"layui-card\">" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>" +
                                "                                    <xmp>" + (i + 1) + "." + data.result[i].j_describe + "</xmp>" +
                                "                                </div>" +
                                "                                <form class=\"layui-form\" action=\"\">" +
                                "                                    <div class=\"layui-form-item\">" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"对\" title=\"对\">" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"错\" title=\"错\" >" +
                                "                                    </div>" +
                                "                                    </div>" +
                                "                                </form>" +
                                "                               <div class='answer' hidden>" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>正确答案:" +
                                "                                    "+data.result[i].j_answer+"" +
                                "                                </div>" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>答案解析:" +
                                "                                    "+data.result[i].j_analysis+"" +
                                "                                </div>" +
                                "                               </div>" +
                                "                            </div>" +
                                "                        </div>";
                        }
                        $("#question_list").html(text);
                        form.render();
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
        })
    }
    function get_saq_test(){
        layui.use(['element', "form", 'jquery', 'layer', 'util'], function () {
            const form = layui.form;
            const $ = layui.jquery;
            const layer = layui.layer;
            const data = form.val("example");
            const s_id = Number(data.s_id);
            $.ajax({
                url: 'get_saq_test_by_s_id',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data:{
                    s_id:s_id
                },
                success: function (data) {
                    if (data.code === 200) {
                        var text = ""
                        for (let i = 0; i < data.result.length; i++) {
                            text += "<div class=\"layui-col-sm12\" style=\"background: #f7f8fc\">" +
                                "                            <div class=\"layui-card\">" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>" +
                                "                                    <xmp>" + (i + 1) + "." + data.result[i].sa_describe + "</xmp>" +
                                "                                </div>" +
                                "                                <form class=\"layui-form\" action=\"\">" +
                                "                                    <div class=\"layui-form-item\">" +
                                "                                    <div class=\"layui-card-body\">" +
                                "                                        <textarea placeholder=\"请输入内容\" name=\"q_answer\" class=\"layui-textarea\"></textarea>" +
                                "                                    </div>" +
                                "                                    </div>" +
                                "                                </form>" +
                                "                               <div class='answer' hidden>" +
                                "                                <div class=\"layui-card-body\" style='background: gainsboro'>正确答案:" +
                                "                                    "+data.result[i].sa_answer+"" +
                                "                                </div>" +
                                "                                <div class=\"layui-card-body\" style='background: gainsboro'>答案解析:" +
                                "                                    "+data.result[i].sa_analysis+"" +
                                "                                </div>" +
                                "                               </div>" +
                                "                            </div>" +
                                "                        </div>";
                        }
                        $("#question_list").html(text);
                        form.render();
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
        })
    }
    function browse_res(){
        $(".answer").show();
    }

    function change_question(){
        if (index===0){
            get_cq_test()
        }else if (index===1){
            get_jq_test()
        }else {
            get_saq_test()
        }
    }
</script>
</html>